<template>
  <view class="huangguan">
    <text :class="`ali-icon ${icon}`"></text>
    <view class="icon-text" :style="{ transform: `translateY(${translateY})` }">
      {{ iconText }}
    </view>
  </view>
</template>
<script setup lang="ts">
  const props = defineProps({
    icon: {
      type: String,
      defualt: '',
    },
    iconFontSize: {
      type: String,
      defualt: '',
    },
    iconColor: {
      type: String,
      defualt: '',
    },
    iconText: {
      type: String,
      defualt: '',
    },
    iconTextColor: {
      type: String,
      defualt: '',
    },
    iconTextFontSize: {
      type: String,
      defualt: '',
    },
    translateY: {
      type: String,
      defualt: '-70%',
    },
  });
</script>
<style lang="scss" scoped>
  .huangguan {
    position: relative;
    text-align: center;
    .ali-icon {
      color: v-bind('iconColor');
      font-size: v-bind('iconFontSize');
    }

    .icon-text {
      position: absolute;
      color: v-bind('iconTextColor');
      font-size: v-bind('iconTextFontSize');
      font-weight: 700;
      line-height: 32rpx;
      left: 0;
      bottom: 0;
      text-align: center;
      width: 100%;
    }
  }
</style>
